<template>
	<div class="leaveMessage">
		<div class="tit">
			<header>永远年少 总是多金</header>
			<!-- <button class="faBu">
				<router-link to="/Republic">
					<p>发布</p>
				</router-link>
			</button> -->
		</div>


		<br>
		<div class="main" v-for="(val,index) in user">
			<!-- 需要一个大的外循环，把数据库中的值渲染出来-->
			
			<img :src="val.user_head" alt="" class="userPic"  />
			<div class="userInput">
				<p class="userName">{{val.name}}</p>
				<p class="userMessage">{{val.content}}</p>
			</div>
			<div class="userPicList">
				<!-- 循环图片库，需要判断数量 给图片不一样的大小-->
				<template v-for="(item, index) in val.images">
					<img :src="item" alt="" class="userPics">
				</template>
			</div>

			<div class="userFunc">
				<!-- 评论时往库中添加，重新加载评论区 -->
				<span class="userTime">{{val.time}}</span>
				<button>❥赞</button>
				<button @click="showPicker=true">评论</button>
			</div>
			<!-- <van-popup v-model="showPicker" round position="bottom" :style="{ height: '60%' }"></van-popup> -->
			<div class='userMessageList'>
				<!-- 循环、渲染 -->
				<p class="messageList" v-for="value in val.comment_id">
					<span class="userName">{{value.name}}:</span>
					<span>{{value.comment}}</span>
				</p>
			</div>

			<hr>
		</div>
	


	</div>


</template>

<script>
	// @ is an alias to /src

import $ from 'jquery'
	export default {
		name: 'LeaveMessage',
		components: {

		},
		data() {
			return {
				time: '',
				showPicker: true,
				user: []
			}

		},
		created() {
			this.time = new Date()
			this.time = this.time.getHours() + ':' + this.time.getMinutes();
			this.axios.get("getAllPostings").then(res => {
				this.user = res.data;
			});

		},
		methods: {
			
		}
	}
</script>
<style>
	
	.tit {
		width: 100%;
		height: 40px;
		background: gainsboro;
		position: fixed;
		top: 0px;
		margin-bottom: 40px;
	}

	header {
		width: 100%;
		height: 40px;

		text-align: center;
		line-height: 40px;
		font-size: 16px;
		font-family: "copperplate gothic bold";
		font-style: oblique;


	}

	@font-face {
		font-family: 'Monoton';
		font-style: normal;
		font-weight: 400;
		src: local('Monoton'), local('Monoton-Regular'), url(http://themes.googleusercontent.com/static/fonts/monoton/v4/AKI-lyzyNHXByGHeOcds_w.woff) format('woff');
	}




	header {

		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		transition: all 0.5s;
	}

	header {
		color: #FF1177;
		font-family: Monoton;
	}

	header {
		-webkit-animation: neon1 2s ease-in-out infinite alternate;
		-moz-animation: neon1 2s ease-in-out infinite alternate;
		animation: neon1 2s ease-in-out infinite alternate;
	}


	@keyframes neon1 {
		from {
			text-shadow: 0 0 4px #fff,
				0 0 10px #fff,
				0 0 10px #fff,
				0 0 10px #FF1177,
				0 0 10px #FF1177,
				0 0 10px #FF1177,
				0 0 10px #FF1177,
				0 0 10px #FF1177;
		}

		to {
			text-shadow: 0 0 5px #fff,
				0 0 10px #fff,
				0 0 15px #fff,
				0 0 20px #FF1177,
				0 0 20px #FF1177,
				0 0 20px #FF1177,
				0 0 20px #FF1177,
				0 0 20px #FF1177;
		}
	}

	.faBu {
		position: absolute;

		border: none;
		right: 15px;
		font-size: 18px;
		background: pink;
		top: 8px;

		outline: none;

	}

	.main {
		margin-bottom: 40px;
		margin-top: 40px;
	}

	.userPic {
		float: left;
		height: 50px;
		width: 50px;
		margin-left: 15px;
		border-radius: 25px;
	}

	.userInput {
		width: 75%;

		float: left;
		margin-left: 10px;
		text-align: left;

	}

	.userInput>p {
		margin-bottom: 5px;
		font-size: 14px;
	}

	.userName {
		color: deeppink;
	}

	.userMessage {
		color: black;
	}

	.userPicList {

		margin-left: 75px;
		width: 70%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.userPics {
		height: 100px;
		width: 32%;
		margin-top: 5px;

	}

	.userFunc {
		margin-left: 75px;
		width: 70%;
		margin-top: 5px;

		position: relative;
		text-align: left;

	}

	.userTime {


		left: 0;
		margin-top: 5px;
	}

	.userFunc>button {

		border: none;
		margin-left: 5px;
		float: right;
		outline: none;
	}

	.userMessageList {
		width: 70%;
		margin-left: 75px;
		margin-top: 5px;
		text-align: left;
		background: darkgray;
		margin-bottom: 57px;
		white-space: pre-wrap;
	}

	.messageList {
		width: 100%;
		margin-top: 5px;
		margin-bottom: 15px;

	}

	.lMessagePL {
		width: 90%;
		height: 60%;
		margin: 15px auto;

	}

	.lMessagePLBT {
		border-radius: 15px;
		border: 0.5px solid hotpink;
		outline: none;
	}
</style>
